<template>
  <div class="acticle-box">
      <div class="left-content">
        <div class="title">{{ article.name }}</div>
        <div class="sub-desc">
          <span class="come" v-if="article.origin">来源 | {{ article.origin }}</span>
          <span class="anchor" v-if="article.author"
            >作者 |
            <span class="people" @click="toDetail">{{
              article.author
            }}</span></span
          >
          <span class="time">{{ formatDate(article.publishDate) }}</span>
        </div>
        <!-- 活动主题 -->
        <div class="theme-box" v-if="article.summary">
          {{ article.summary }}
        </div>
        <div class="detail-box" v-html="article.content"></div>
        <!-- 附件 -->
        <div class="fujian-box" v-if="files.length">
          <div class="fujian-label">附件：</div>
          <div class="fujian-list">
            <a class="file-item" href="item.url" v-for="(item, index) of files" :key="index">{{ item.name }}</a>
          </div>
        </div>
        <!-- 标签 -->
        <div class="tags-box">
          <div
            class="tag"
            v-for="(item, index) of article.tags"
            :key="index"
            @click="tagToDetail(item)"
          >
            {{ item.name }}
          </div>
          <!-- <div class="fenxiang-box">
            <div class="label">分享到：</div>
            <div class="fenxiang-item">
              <img src="../../../assets/wx.png" class="icon" alt="">
              微信
            </div>
            <div class="fenxiang-item">
              <img src="../../../assets/xl.png" class="icon" alt="">
              新浪
            </div>
          </div> -->
        </div>
        <!-- 你可能感兴趣 -->
        <Interested :uuid="article.uuid" />
      </div>
      <div class="right-content">
        <HotArticles :data="hotArticlesList.slice(0, 7)" v-if="hotArticlesList.length" />
        <div ref="fixedBox" :class="{headerFixed: isFixed}">
          <!-- 广告 -->
          <div class="advertising-box" v-if="advertsItem.coverUrl" @click="onDetail(advertsItem)" >
            <div
              class="img"
              :style="{ backgroundImage: 'url(' + advertsItem.coverUrl + ')' }"
            ></div>
            <div class="title">{{ advertsItem.name }}</div>
          </div>
          <!-- 下一篇 -->
          <NextActicle :data="nextActicleDetail" />
        </div>
      </div>
    </div>
</template>

<script>
// 热门文章
import HotArticles from "@/views/home/components/HotArticles";
// 下一篇
import NextActicle from "@/components/NextActicle";
// 可能感兴趣
import Interested from "@/components/Interested";
import moment from "moment";
moment.locale("zh-cn");
import { sideModuleRecommends } from '@/api/api';
export default {
  components: {
    HotArticles,
    NextActicle,
    Interested
  },
  props: {
    article: {
      type: Object,
      default() {
        return {};
      }
    },
    nextActicleDetail: {
      type: Object,
      default() {
        return {};
      }
    },
    advertsItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      hotArticlesList: [],
      isFixed: false,
      scrollHeight: 0,
      initBSwitch: true,
      files: [
        // {
        //   name: 'AWS是如何让机器学习越来越“接地气”的？.text',
        //   url: 'http://www.baidu.com'
        // },
        // {
        //   name: 'AWS是如何让机器学习越来越“接地气”的？.text',
        //   url: 'http://www.baidu.com'
        // }
      ]
    }
  },
  created() {
    this.getRMWZList();
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
  },
  methods: {
    // 右侧点击
    onDetail(item) {
      window.open(item.linkUrl, '_blank')
    },
    initHeight() {
      if (this.initBSwitch) {
        this.getHeight();
      }
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.scrollHeight ? true : false;
    },
    getHeight() {
      this.scrollHeight = this.$refs.fixedBox.getBoundingClientRect().top;
      this.initBSwitch = false;
    },
    destroyed() {
      window.removeEventListener("scroll", this.initHeight, false);
    },
    async getRMWZList() {
      const params = {
        moduleId: 0,
        status: 1,
        resType: 'ZX'
      };
      const res = await sideModuleRecommends(params);
      this.hotArticlesList = res.list || [];
    },
    // 点击作者跳转页面
    toDetail() {
      const params = {
        keywords: this.article.author,
        type: "anchor",
      };
      let routerJump = this.$router.resolve({
        name: "Search",
        query: params,
      });
      window.open(routerJump.href, "_blank");
    },
    // 处理时间
    formatDate(date) {
      console.log(date)
      return moment(date).format("ll");
    },
    tagToDetail(item) {
      const params = {
        keywords: item.name,
        type: 'tag',
        tagId: item.uuid
      };
      let routerJump = this.$router.resolve({ name: 'Search', query: params });
      window.open(routerJump.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>

  .acticle-box {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
    .left-content {
      width: 800px;
      float: left;
      margin-right: 40px;
      .title {
        width: 100%;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #272727;
        line-height: 42px;
        margin-bottom: 12px;
      }
      .sub-desc {
        font-size: 14px;
        
        font-weight: 400;
        color: #696969;
        line-height: 20px;
        margin-bottom: 24px;
        overflow: hidden;
        .come {
          margin-right: 24px;
        }
        .time {
          float: right;
        }
        .anchor {
          cursor: pointer;
          &:hover {
            .people {
              text-decoration: underline;
              color: #ff9195;
            }
          }
        }
      }
      .theme-box {
        width: 800px;
        padding: 20px 24px;
        box-sizing: border-box;
        border-radius: 4px;
        font-size: 16px;
        min-height: 28px;
        font-weight: 400;
        color: #696969;
        line-height: 28px;
        background: #f9f9f9 url("../../../assets/66.png") no-repeat;
        background-size: 102px 75px;
        background-position: 8px 8px;
        margin-bottom: 40px;
        word-break: break-all;
      }
      .detail-box {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        color: #272727;
        line-height: 28px;
        word-break: break-all;
        /deep/img {
          max-width: 100%;
          object-fit: contain;
        }
        /deep/pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
      .fujian-box {
        .fujian-label {
          color: #272727;
          margin-bottom: 10px;
          font-weight: 600;
        }
        .fujian-list {
          .file-item {
            display: block;
            text-decoration: none;
            margin-bottom: 10px;
            color: #909399;
            font-size: 14px;
            text-indent: 40px;
          }
        }

      }
      .tags-box {
        overflow: hidden;
        margin-bottom: 52px;
        margin-top: 40px;
        .tag {
          line-height: 18px;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          float: left;
          margin-right: 8px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #d8d8d8;
          padding: 7px 16px;
          cursor: pointer;
          &:hover {
            border: 1px solid #ff9195;
            color: #f96868;
          }
        }
        .fenxiang-box {
          float: right;
          font-size: 12px;
          
          font-weight: 400;
          color: #696969;
          .label {
            float: left;
            line-height: 32px;
          }
          .fenxiang-item {
            padding: 6px 12px;
            box-sizing: border-box;
            background: #f9f9f9;
            border-radius: 4px;
            line-height: 18px;
            margin-left: 8px;
            float: left;
            cursor: pointer;
            &:active {
              opacity: 0.8;
            }
            .icon {
              width: 20px;
              height: 20px;
              vertical-align: middle;
              margin-right: 4px;
            }
          }
        }
      }
    }
    .right-content {
      width: 340px;
      float: left;
      .headerFixed {
        position: fixed;
        top: 0;
      }
      .advertising-box {
        cursor: pointer;
        margin-top: 52px;
        width: 340px;
        .img {
          width: 340px;
          height: 190px;
          background-repeat: no-repeat;
          background-size: cover;
          border-radius: 4px 4px 0px 0px;
        }
        .title {
          background: #f9f9f9;
          border-radius: 0px 0px 4px 4px;
          padding: 16px 18px 20px;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #303741;
          line-height: 24px;
        }
      }
    }
  }
</style>
